<template>
    <!-- 搜索 -->
  <div>
    <p style="font-weight: 900;">搜索</p>
  <el-form :inline="true" :model="selForm" class="demo-form-inline">
    <el-form-item label="用户id">
      <el-input v-model="selForm.userId" placeholder="用户id" clearable />
    </el-form-item>
    <el-form-item label="商品id">
      <el-input v-model="selForm.productId" placeholder="商品id" clearable />
    </el-form-item>
    <el-form-item label="状态">
      <el-select
        v-model="selForm.status"
        placeholder="商品状态"
        clearable
      >
        <el-option label="待付款" value="0" />
        <el-option label="待发货" value="1" />
        <el-option label="待收货" value="2" />
        <el-option label="待归还" value="3" />
        <el-option label="待评价" value="4" />
      </el-select>
    </el-form-item>
    <el-form-item label="时间">
      <el-date-picker
        style="width: 180px;"
        v-model="selForm.beginTime"
        type="date"
        placeholder="开始时间"
        clearable
      />-
      <el-date-picker
      style="width: 180px;"
        v-model="selForm.enddTime"
        type="date"
        placeholder="结束时间"
        clearable
      />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="sel">Query</el-button>
    </el-form-item>
  </el-form>
  </div>
  <!-- 用户列表 新增 删除 修改 -->
  <div>
    <p style="font-weight: 900;">用户列表</p>
    <div class="btu">
        <el-button type="warning" @click="addOrder=true"  plain>新增</el-button>
        <el-button type="danger" @click="delAll" plain>批量删除</el-button>
    </div>
    <el-table :data="orderData" style="width: 100%" border @selection-change="handleSelectionChange">
        <el-table-column fixed type="selection" width="55" />
        <el-table-column prop="orderId" label="订单id" width="160" />
        <el-table-column prop="userId" label="用户id" width="160" />
        <el-table-column prop="productId" label="物品id" width="160" />
        <el-table-column prop="rentalPlan" label="租凭方案" width="160" />
        <el-table-column prop="rentalDuration" label="租期" width="160" />
        <el-table-column prop="quantity" label="租凭数量" width="160" />
        <el-table-column prop="status" label="状态" width="160" />
        <el-table-column prop="shippingAddress" label="收货地址" width="200" />
        <el-table-column prop="createdTime" label="创建时间" width="160"></el-table-column>
        <el-table-column prop="endTime" label="结束时间" width="160"></el-table-column>
        <el-table-column fixed="right" label="Operations" width="160">
          <template #default="scope">
            <el-button size="small" @click="handleEdit(scope.$index, scope.row)">
              Edit
            </el-button>
            <el-button
              size="small"
              type="danger"
              @click="handleDelete(scope.$index, scope.row)"
            >
              Delete
            </el-button>
          </template>
        </el-table-column>
    </el-table>
    <div class="demo-pagination-block">
        <el-pagination
          v-model:current-page="currentPage"
          v-model:page-size="pageSize"
          :page-sizes="[5,10,15,20]"
          :size="size"
          :disabled="disabled"
          :background="background"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
    </div>
  </div>
  <!-- 新增页面 -->
  <el-dialog v-model="addOrder" title="添加订单" width="500" draggable>
    <span>
        <el-form 
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="addForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="size"
            status-icon
        >
        <el-form-item label="用户id" prop="userId">
          <el-input v-model="addForm.userId" />
        </el-form-item>
        <el-form-item label="产品id" prop="productId">
          <el-input v-model="addForm.productId" />
        </el-form-item>
        <el-form-item label="租凭方案" prop="rentalPlan">
          <el-input v-model="addForm.rentalPlan" />
        </el-form-item>
        <el-form-item label="租期" prop="rentalDuration">
          <el-input v-model="addForm.rentalDuration" />
        </el-form-item>
        <el-form-item label="租凭数量" prop="quantity">
          <el-input v-model="addForm.quantity" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="addForm.status" placeholder="please select your zone">
            <el-option label="待付款" value="0" />
            <el-option label="待发货" value="1" />
            <el-option label="待收货" value="2" />
            <el-option label="待归还" value="3" />
            <el-option label="待评价" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createdTime">
          <el-col :span="11">
            <el-date-picker
              v-model="addForm.createdTime"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="取消时间">
          <el-col :span="11">
            <el-date-picker
              v-model="addForm.endTime"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="地址" prop="shippingAddress">
          <el-input v-model="addForm.shippingAddress" type="textarea" />
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="addOrder = false">取消</el-button>
        <el-button type="primary" @click="add">
          添加
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!-- 修改页面 -->
  <el-dialog v-model="editOrder" title="修改订单" width="500" draggable>
    <span>
        <el-form 
            ref="ruleFormRef"
            style="max-width: 600px"
            :model="editForm"
            :rules="rules"
            label-width="auto"
            class="demo-ruleForm"
            :size="size"
            status-icon
        >
        <el-form-item label="用户id" prop="userId">
          <el-input v-model="editForm.userId" />
        </el-form-item>
        <el-form-item label="产品id" prop="productId">
          <el-input v-model="editForm.productId" />
        </el-form-item>
        <el-form-item label="租凭方案" prop="rentalPlan">
          <el-input v-model="editForm.rentalPlan" />
        </el-form-item>
        <el-form-item label="租期" prop="rentalDuration">
          <el-input v-model="editForm.rentalDuration" />
        </el-form-item>
        <el-form-item label="租凭数量" prop="quantity">
          <el-input v-model="editForm.quantity" />
        </el-form-item>
        <el-form-item label="状态" prop="status">
          <el-select v-model="editForm.status" placeholder="please select your zone">
            <el-option label="待付款" value="0" />
            <el-option label="待发货" value="1" />
            <el-option label="待收货" value="2" />
            <el-option label="待归还" value="3" />
            <el-option label="待评价" value="4" />
          </el-select>
        </el-form-item>
        <el-form-item label="创建时间" prop="createdTime">
          <el-col :span="11">
            <el-date-picker
              v-model="editForm.createdTime"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="取消时间">
          <el-col :span="11">
            <el-date-picker
              v-model="editForm.endTime"
              type="date"
              placeholder="Pick a date"
              style="width: 100%"
            />
          </el-col>
        </el-form-item>
        <el-form-item label="地址" prop="shippingAddress">
          <el-input v-model="editForm.shippingAddress" type="textarea" />
        </el-form-item>
      </el-form>
    </span>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="editOrder = false">取消</el-button>
        <el-button type="primary" @click="edit">
          修改
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script lang="ts" setup>
import {onMounted, ref} from "vue"
import { reactive } from 'vue'
import { Timer } from '@element-plus/icons-vue'
import { ComponentSize, FormInstance, FormRules,ElMessage} from 'element-plus'
import api from "../../api/index"
import 'element-plus/dist/index.css'
const selForm = ref({
  userId: null,
  productId: null,
  status:null,
  beginTime: null,
  enddTime: null
})

const currentPage = ref(1)
const pageSize = ref(5)
const total=ref(100)
const size = ref<ComponentSize>('default')
//展示新增
const addOrder = ref(false)
//展示修改
const editOrder= ref(false)
//订单数据
const orderData= ref([])
const ids=ref<Number[]>([])
const sel =()=>{
    console.log(selForm.value);
    gzData()
}
const addForm=ref({
    orderId:'',
    userId:'',
    productId:'',
    rentalPlan:"",
    status:'0',
    rentalDuration:'',
    quantity:'',
    shippingAddress:"",
    createdTime:'',
    endTime:''
})
const editForm=ref({
    orderId:'',
    userId:'',
    productId:'',
    rentalPlan:"",
    status:'0',
    rentalDuration:'',
    quantity:'',
    shippingAddress:"",
    createdTime:'',
    endTime:''
})

interface Order {
  orderId: number
  userId: number
  productId: number
  rentalPlan:string
  status:number
  rentalDuration:number
  quantity:number
  shippingAddress:string
  createdTime:Date
  endTime:Date
}
const add=()=>{
    api.postReq("/order/add",addForm.value).then(res=>{
        console.log(res.data.msg);
        if(res.data.code==1){
            ElMessage({
            message: res.data.msg,
            type: 'success',
            })
            gzData()
            addForm.value={
                orderId:'',
                userId:'',
                productId:'',
                rentalPlan:"",
                status:'0',
                rentalDuration:'',
                quantity:'',
                shippingAddress:"",
                createdTime:'',
                endTime:''
            }
        }else{
            ElMessage.error(res.data.msg)
        }
    })
}
const handleSelectionChange=(val:Order[])=>{
    ids.value=val.map(x=>x.orderId)
}
const delAll=()=>{
    api.postReq("/order/delAll",ids.value).then(res=>{
        console.log(res.data.msg);
        if(res.data.code==1){
            ElMessage({
            message: res.data.msg,
            type: 'success',
            })
            gzData()
        }else{
            ElMessage.error(res.data.msg)
        }
    })
}
//修改页面的行
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`)
  pageSize.value=val
  gzData()
}
//修改页数
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`)
  currentPage.value=val
  gzData()
}

//修改
const handleEdit = (index: number, row: Order) => {
  console.log(index, row)
  editOrder.value=true
  editForm.value=row
}
const edit=()=>{
    api.postReq("/order/update",editForm.value).then(res=>{
        console.log(res.data.msg);
        if(res.data.code==1){
            ElMessage({
            message: res.data.msg,
            type: 'success',
            })
            gzData()
        }else{
            ElMessage.error(res.data.msg)
        }
    })
}
//删除
const handleDelete = (index: number, row: Order) => {
  console.log(index, row)
  api.postReq("/order/del?id="+row.orderId).then(res=>{
        console.log(res.data.msg);
        if(res.data.code==1){
            ElMessage({
            message: res.data.msg,
            type: 'success',
            })
            gzData()
        }else{
            ElMessage.error(res.data.msg)
        }
    })
}
const gzData=()=>{
    console.log(selForm.value);
    api.postReq('/order/selAll?pageNum='+currentPage.value+'&pageSize='+pageSize.value,selForm.value).then(res=>{
        let result=res.data
        orderData.value=result.data.list
        currentPage.value=result.data.pageNum
        pageSize.value=result.data.pageSize
        total.value=result.data.total
    })
}
onMounted(()=>{
    gzData()
})
//制定添加规则
const rules = reactive<FormRules<Order>>({
  userId: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' }
  ],
  productId: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'blur',
    },
  ],
  rentalPlan: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'blur',
    },
  ],
  rentalDuration: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'blur',
    },
  ],
  quantity: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'blur',
    },
  ],
  status: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'blur',
    },
  ],
  createdTime: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'blur',
    },
  ],
  shippingAddress: [
    {
      required: true,
      message: 'Please select Activity zone',
      trigger: 'blur',
    },
  ],
})

</script>

<style>
.btu{
    position: absolute;
    top: 26%;
    right: 1.5%;
}
.demo-form-inline .el-input {
  --el-input-width: 150px;
}

.demo-form-inline .el-select {
  --el-select-width: 150px;
}
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
.demo-pagination-block{
    float: right;
    margin-top: 10px;
}
</style>
